<template>
	<view class="ss-flex ss-flex-wrap" :class="className" :style="{gap:gap + 'rpx'}">
		<view class="mr-10 mt-15 image-list" :style="{width:width,height:height}" v-for="(item, index) in fileList" :key="index">
			<image class="ss-radius-10" v-if="sheep.$helper.isImageLink(item)" @tap="preview(index)" :style="{width:width,height:height}" :src="item"></image>
			<!-- <video v-else :src="item" :style="{width:width,height:height}"></video> -->
			<view v-else class="video-box" :style="{width:width,height:height}">
				<image class="ss-radius-10" :src="`${item}?x-oss-process=video/snapshot,t_10000,m_fast`" :style="{width:width,height:height}" mode="aspectFill"></image>
				<view @tap="state.playIndex = index,state.playShow = true" class="play-box ss-flex ss-row-center ss-col-center">
					<z-icon name="play"></z-icon>
				</view>
			</view>
			<z-icon v-if="showDelBtn" @tap="uploadRemove(index)" name="icon-upload-del" size="40rpx" style="position: absolute;top: 0rpx;right: 0rpx;"></z-icon>
		</view>
		<block v-if="fileList.length<maxCount && showUpload">
			<view v-if="type == 'default'" @click="changeFile" class="ss-flex-col ss-row-center ss-col-center upload_box mt-15" :style="{width:width,height:height,backgroundColor:bgColor}" hover-class="slot-btn__hover" hover-stay-time="150">
				<z-icon name="icon-photo" size="48rpx"></z-icon>
				<view class="upload_number ss-m-t-16">{{ name }}</view>
			</view>
			<view v-if="type == 'idCard'" class="ss-flex-col ss-col-center">
				<view @click="changeFile" style="background-color: #EAE9E9;" class="ss-flex-col ss-row-center ss-col-center upload_box mt-15" :style="{width:width,height:height,backgroundColor:bgColor}" hover-class="slot-btn__hover" hover-stay-time="150">
					<z-icon name="icon-photo" size="64rpx"></z-icon>
				</view>
				<!-- <view class="ss-m-t-28 ss-font-28">{{ name }}</view> -->
			</view>
		</block>
	</view>
	<z-popup v-model="state.playShow" closeOnClickOverlay>
		<view v-if="state.playShow" class="ss-p-12">
			<view class="ss-flex ss-row-right bg-color-black ss-p-y-8 ss-p-r-8">
				<z-icon name="icon-close" @tap="state.playShow = false"></z-icon>
			</view>
			<video :src="fileList[state.playIndex]" controls autoplay></video>
		</view>
	</z-popup>
	<z-modaltips v-model="state.removeShow" content="确认移除吗？" @confirm="confirmRemove" />
</template>

<script setup>
	import sheep from "@/sheep"
	import clone from 'lodash/clone';
	// import { baseUrl,is_oss_upload,baseOssUrl } from "@/config/config.js"
	// import { oss_info } from "@/api/api/index.js"
	// import utils from '@/utils/function.js'
	// import {
	// 	chooseImage
	// } from '@/utils/index.js'
	let state = reactive({
		action:sheep.$config.baseUrl + '/api/setting.Upload/file',
		formData:{},
		successList:[],
		playShow:false,
		playIndex:0,
		removeIndex:'',
		removeShow:false
	})
	let uUpload = ref(null)
	const props = defineProps({
		autoUpload:{
			type:Boolean,
			default:true
		},
		showUpload:{
			type:Boolean,
			default:true
		},
		showDelBtn:{
			type:Boolean,
			default:true
		},
		gap:{
			type:[String,Number],
			default: 20
		},
		modelValue:{
			type:[String,Array],
			default:''
		},
		type:{
			type:String,
			default:'default'
		},
		width:{
			type:String,
			default:'144rpx'  
		},
		height:{
			type:String,
			default:'144rpx'
		},
		bgColor:{
			type:String,
			default:''
		},
		name:{
			type:String,
			default:'照片/视频'
		},
		uploadType:{
			type:[String,Number],
			default:3
		},
		maxCount:{
			type:[Number,String],
			default:1
		},
		is_url:{  //是否带有域名  
			type:Boolean,
			default:true
		},
		className:{
			type:String,
			default:''
		},
		sourceType:{
			type:Array,
			default:['camera','album']
		}
	})
	let fileList = computed(() => {
		// return props.modelValue
		if(!props.modelValue) return []
		let list=props.modelValue.split(',')
		return list.map(v=>{
			return sheep.$config.baseOssUrl + v
		})   
	})
	onMounted( () => {
		// if(sheep.$config.is_oss_upload) {
		// 	oss_info().then( res => {
		// 		const { policy,accessid,signature,host } = res.data
		// 		let key = res.data.key + new Date().getTime() + Math.floor(Math.random() * 100) + '.png'
		// 		let formData = {
		// 			key: key,
		// 			policy: policy,
		// 			OSSAccessKeyId: accessid,
		// 			success_action_status: 200,
		// 			signature: signature
		// 		};
		// 		state.formData = formData
		// 		state.action = host 
		// 	}).catch( err => {})
		// }
	})
	const emit = defineEmits(['update:modelValue'])
	function uploadImage(){
		// sheep.$helper.chooseImage({count:props.maxCount - fileList.value.length},res => {
		// 	console.log(res,'上传成功');
		// 	let successList = clone(props.modelValue)
		// 	uploadChange(successList.concat([res]))
		// })
		sheep.$helper.chooseImage({count:props.maxCount - fileList.value.length,sourceType:props.sourceType},({url}) => {
			let successList = props.modelValue?props.modelValue.split(','):[]
			successList.push(url)
			uploadChange(successList)
		})
	}
	function uploadVideo(){
		// sheep.$helper.chooseImage({count:props.maxCount - fileList.value.length},res => {
		// 	console.log(res,'上传成功');
		// 	let successList = clone(props.modelValue)
		// 	uploadChange(successList.concat([res]))
		// })
		sheep.$helper.chooseVideo({count:props.maxCount - fileList.value.length,sourceType:props.sourceType},({url}) => {
			let successList = props.modelValue?props.modelValue.split(','):[]
			successList.push(url)
			uploadChange(successList)
		})
	}
	function changeFile(){
		let uploadType = props.uploadType
		if(uploadType == 1) return uploadImage()
		if(uploadType == 2) return uploadVideo()
		if(uploadType == 3) {
			uni.showActionSheet({
				itemList: ['上传图片', '上传视频'],
				success: (res) => {
					if(res.tapIndex == 0) return uploadImage()
					if(res.tapIndex == 1) return uploadVideo()
				}
			})
		}
	}
	function uploadRemove(index){
		state.removeIndex = index
		state.removeShow = true
	}
	function confirmRemove(){
		state.removeShow = false
		if(state.removeIndex === '') return
		let successList = clone(fileList.value)
		successList.splice(state.removeIndex,1)
		state.removeIndex = ''
		uploadChange(successList)  
	}
	function uploadChange(successList){
		// emit('update:modelValue',successList)
		emit('update:modelValue',successList.length?successList.join(','):'')
	}
	 function beforeUpload(){
		console.log('上传前的钩子函数');
		// if(!is_oss_upload) return true
		// let ossInfo = await oss_info()
	}
	function preview(index){
		let urls = fileList.value.filter( item => sheep.$helper.isImageLink(item))
		// sheep.$helper.previewImage({urls:urls,current:index})
		uni.previewImage({
			urls:urls,
			current:index
		})
	}
</script>

<style scoped lang="scss">
	.slot-btn {
		width: 329rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}
	
	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
	.upload_box {
		// width: 200rpx;
		// height: 200rpx;
		// background: #F7F8FA;
		border: 2rpx dotted #B5B5B5;
		border-radius: 16rpx;
		.upload_icon {
			width: 64rpx;
			height: 64rpx;
		}
		.upload_number {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999;
		}
	}
	.image-list {
		position: relative;
	}
	.video-box {
		position:relative;
	}
	.play-box {
		width:100%;
		height:100%;
		position: absolute;
		left: 0;
		top: 0;
		background:rgba(255, 255, 255, 0.5);
	}
	.pre-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	
		.pre-item {
			flex: 0 0 48.5%;
			border-radius: 10rpx;
			// overflow: hidden;
			position: relative;
			margin-bottom: 20rpx;
		}
</style>